<template>
  <main>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
      <el-menu-item v-if="!userStore.hasLogin" index="/login">Login</el-menu-item>
      <el-menu-item v-if="userStore.hasLogin" index="/">{{ userStore.userName }}</el-menu-item>
      <el-menu-item index="/">默写</el-menu-item>
      <el-menu-item index="/history">错题记录</el-menu-item>
    </el-menu>
  </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

import { userStatus } from '@/stores/userStatus'

const userStore = ref(userStatus())

const route = useRoute()
// const router = useRouter()
let activeIndex = route.path
</script>

<script methods></script>

<style scoped lang="scss">
@import '@/styles/Nav.scss';

.el-menu-item:hover {
  color: #e64949;
  text-decoration: none;
}
</style>
